<template>
    <div>
        <md-table v-model="units" md-sort="number" md-sort-order="asc" md-card md-fixed-header>
            <md-table-toolbar>
                <h1 class="md-title">Units</h1>
                <md-button class="md-icon-button" md-menu-trigger @click="showDialog = !showDialog">
                    <md-icon>add</md-icon>
                </md-button>
            </md-table-toolbar>

            <md-table-row slot="md-table-row" slot-scope="{ item }">
                <md-table-cell md-label="Unit Number" md-sort-by="number" md-numeric>{{ item.number }}</md-table-cell>
                <md-table-cell md-label="Unit Name" md-sort-by="name">{{ item.name }}</md-table-cell>
            </md-table-row>
        </md-table>

<!--        dialog-->
        <md-dialog :md-active.sync="showDialog">
            <md-dialog-title>Add Unit</md-dialog-title>
            <form novalidate class="md-layout">
                <md-field >
                    <label >Unit Number</label>
                    <md-input type="number" id="unitNumber" name="unitNumber" autocomplete="unitNumber" v-model="form.unitNumber"  />
                </md-field>
                <md-field >
                    <label >Unit Name</label>
                    <md-input name="unitName" id="unitName" autocomplete="unitName" v-model="form.unitName" />
                </md-field>
            </form>
            <md-dialog-actions>
                <md-button class="md-primary" @click="showDialog = false">Close</md-button>
                <md-button class="md-primary" @click="first = true">Save</md-button>
            </md-dialog-actions>
        </md-dialog>

        <md-dialog-alert
                :md-active.sync="first"
                md-content="Information about to be saved!"
                md-confirm-text="Cool!" />
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: "Units",
        data: () => ({
            units: [],
            showDialog: false,
            first: false,
            form: {
                unitNumber: null,
                unitName: null,
            }
        }),
        created() {
            axios.get('/json/Units.json').then(rep => {
                const {data} = rep
                this.units = data
            })
        },
        method: {
            saveUnit(){
                this.showDialog = !this.showDialog
                this.first = !this.first
            }
        }
    }
</script>

<style lang="scss" scoped>
    .card-expansion {
        height: 400px;
    }

    .md-card {
        width: 90%;
        margin: 4px;
        display: inline-block;
        vertical-align: top;
    }
</style>